import React from 'react';

export class App extends React.Component {
  // 事件处理函数，中也可以访问 this.props
  render() {
    // this.props.name = 'xxx';
    return (
      <div>
        <h1>下面是传入组件的数据：</h1>
        <h3>我叫:{this.props.name}</h3>
        <h3>我今年:{this.props.age}岁</h3>
        <h3>我喜欢:{this.props.hobbies.join('=>')}</h3>
        <h3>
          我对象:{this.props.obj.name},{this.props.obj.age}
        </h3>
        执行个函数吧: {this.props.fn()}
        传递个JSX吧: {this.props.jsx}
      </div>
    );
  }
}

// 渲染
// 组件的使用规则
// root.render(
//   <App
//     name={'Jack'}
//     age={18}
//     hobbies={['吃饭', '睡觉', '敲代码']}
//     obj={{ name: 'Rose', age: 18 }}
//     fn={() => <h1>wahaha</h1>}
//     jsx={<div>我是传入的标签</div>}
//   />
// );
